// Highlight code block
figure.highlight,
.codeblock {
    margin:         10px 0;
    line-height:    map-get($highlight, line-height);
    padding-top:    15px;
    padding-bottom: 15px;
    overflow:       hidden;

    table {
        display: block;
        width:   100%;
    }

    // Reset for tag `pre` and  for class `.gutter`, `.code`, `.tag`
    pre,
    .gutter,
    .code,
    .tag {
        background-color: inherit;
        font-family:      #{map-get($font-families, 'highlight')};
        border:           none;
        padding:          0;
        margin:           0;
        // To override cursor attribute of `.tag` components
        cursor:           text;
    }
    // To align line number and line of code regardless if there is a scroll bar or not
    .gutter,
    .code {
        vertical-align: top;
    }
    // hide gutter when code is plain text
    &.plain {
        .gutter {
            display: none;
        }
    }
    // Meta bar which contains name of the file and his link
    figcaption {
        font-size: 1.3rem;
        padding:   0 15px 20px;
        margin:    0;

        a {
            float: right;
        }
    }

    // Gutter which contains line numbers
    .gutter {
        border-right: map-get($highlight, border);
        padding:      0.3em 15px;
    }
    // Code container
    .code {
        padding: 0.3em 15px 0.3em 1em;
        width:   100%;

        pre {
            max-width:  calc(#{map-get($main-content, 'max-width')} - 50px);
            overflow-x: auto;
            overflow-y: hidden;
        }
    }
    // All lines in gutter and code container
    .line {
        height:    map-get($highlight, line-height);
        font-size: map-get($highlight, font-size);
    }
}

// Tabbed code block
.codeblock--tabbed {
    figure.highlight,
    pre > code {
        margin-bottom:  0;
        padding-bottom: 0;
    }
    figcaption {
        a, span {
            float: left !important;
        }
        .tabs {
            float: right;
            .tab {
                cursor:  pointer;
                display: inline-block;
                margin:  0 5px;
                padding: 0 7px;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}

// Gist
.gist {
    .line,
    .line-number {
        font-family: map-get($font-families, 'highlight');
        font-size:   1em;
        margin:      0 0 5px 0;
    }
}